$count1: 4;
$count2: 11;

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #ECEFF1;
    color: #37474F;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 16px;
}

#top {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #7a6b87;
    color: #eee;
}

#myBar {
    position: absolute;
    margin: 10% auto;
    height: 50px;
    text-align: center;
    background-color: rgb(35, 91, 128);
    color: #fff;
}

#container {
    width: 80%;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    padding-top: 50px;
}

.queue {
    display: flex;
    flex-direction: column;
    flex: 1 1 24%;
}

.item {
    position: relative;
    width: 90%;
    margin: 2%;
    height: 260px;
    border-radius: 5px;
    box-shadow: 4px 4px 6px 1px gray;
    cursor: pointer;
}

@for $i from 1 to $count1+1 {
    .queue:nth-child(#{$i}) {
        @for $j from 1 to $count2+1 {
            .item:nth-child(#{$j}) {
                height: #{randomNum(200, 200)}px;
                border-radius: 5px;
                box-shadow: 4px 4px 6px 1px gray;
                cursor: pointer;
                position: relative;

                img {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 65%;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                }

                h3 {
                    position: absolute;
                    left: 10%;
                    top: 70%;
                    font-weight: 300;
                    color: #fff;
                    margin-bottom: 8px;
                }

                p {
                    position: absolute;
                    left: 10%;
                    top: 80%;
                    color: #eee;
                    font-size: 14px;
                    overflow: hidden;
                }

                .content {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    display: none;

                    p {
                        position: relative;
                        margin-top: -15%;
                        height: 20px;
                        line-height: 20px;
                        overflow: hidden;
                    }

                }

                &:hover {
                    -webkit-transform: scale(1.2);
                    transform: scale(1.2);
                    transition: all 1s ease 0s;
                    z-index: 10;
                }



            }
        }
    }
}

.show {
    display: block;
}

.hidden {
    display: none;
}

.in {
    animation: clipRectIn 0.6s;
}

@keyframes clipRectIn {
    0% {
        clip-path: inset(50% round 10% 50%);
    }

    100% {
        clip-path: inset(0% round 0);
    }
}